import { useQuasar } from '@teld/q-components';

import { ref } from 'vue';
import constConditions from 't/bussiness/filter/config/constConditions';
let _constConditions = {};
for (let i in constConditions) {
  constConditions[i].forEach(item => {
    _constConditions[item.Code] = item.Text;
  });
}

const generateFilterGroup = (filter, isFirstNode,fromGroup,relationName) => {
  
 
  return (
    <span
      class={`${fromGroup?`tr-filter-item filter-item-outer filter-item-outer-pc ${filter.IsOff ? 'filter-item-off' : ''}`:(isFirstNode ? `filter-group-first filter-groups-item-panel ${filter.IsOff ? 'filter-item-off' : ''}` : `filter-groups-item-panel ${filter.IsOff ? 'filter-item-off' : ''}`)}`}
    >
      <span class={`filter-group filter-group-pc ${filter.IsOff ? 'filter-item-off' : ''}`}>
        <span>
          <span
            class={`filter-relation filter-relation_group filter-relation-${filter.Relation}  ${filter.IsOff ? 'filter-item-off' : ''}`}
          >
            {relationName['_' + filter.Relation]}
          </span>
        </span>
        {(() => {
          if (filter.Children && filter.Children.length) {
            return (
              <span class={`filter-item-first filter-list  ${filter.IsOff ? 'filter-item-off' : ''}`}>
                {generateComContains(filter.Children, isFirstNode, true,relationName)}
              </span>
            );
          }
        })()}
      </span>
    </span>
  );
};

const generateBasicFilter = (filter, isFirstNode, fromGroup,relationName) => {

    if(fromGroup){
        return  generateFilterContent(filter, isFirstNode, fromGroup,relationName)   
    }
  return (
    <span
      class={`${isFirstNode ? 'filter-group-first ' : ''}filter-groups-item-panel`}
    >
      {generateFilterContent(filter, isFirstNode, fromGroup,relationName)}
    </span>
  );
};
const generateFilterContent = (filter, isFirstNode, fromGroup,relationName) => {
  return (
    <span
      class={`tr-filter-item filter-item-outer filter-item-outer-pc ${filter.IsOff ? 'filter-item-off' : ''}`}
      style='display: inline-block; color: var(--color-level-1);'
    >
      {(() => {
        if (isFirstNode) {
          if (fromGroup) return '';
          return (
            <span>
              <span
                class={`filter-relation filter-relation-${filter.Relation} ${filter.IsOff ? 'filter-item-off' : ''}`}
              >
                {relationName.and}
              </span>
            </span>
          );
        } else {
          return (
            <span>
              <span
                class={`filter-relation filter-relation-${filter.Relation} ${filter.IsOff ? 'filter-item-off' : ''}`}
              >
                {relationName['_' + filter.Relation]}
              </span>
            </span>
          );
        }
      })()}
      <span class={`display-inline-block  ${filter.IsOff ? 'filter-item-off' : ''}`}>
        <span class='' size='medium' placement='' trigger='click'>
          <span data-is-must='false' class='filter-name'>
            <span class='filter-name'>{filter.Name}</span>
          </span>
        </span>
        <span
          class=''
          size='medium'
          placement=''
          trigger='click'
          disabled='true'
        >
          <span class='filter-condition'>
            {_constConditions[filter.Condition]}
          </span>
        </span>
        <span class='filter-value-panel' disabled='false' filteriseasy='false'>
          <span class='filter-value'>{filter.Value||filter.ValueName }</span>
        </span>
      </span>
    </span>
  );
};

export const generateComContains = (filter, isFirst, fromGroup,relationName) => {
  const $q = useQuasar();
  relationName||(relationName = {
    and: $q.lang.queryPlan.mobile.and,
    _and: $q.lang.queryPlan.mobile['_and'],
    _or: $q.lang.queryPlan.mobile['_or'],
  }) ;
  if (!filter) return '';
  let Template = [];
  filter.forEach((element, index) => {
    let _template = '';
    if (element.Type == 'Group') {
      _template = generateFilterGroup(
        element,
         index == 0,
        fromGroup,
        relationName
      );
    } else if (element.ElementType == 'Group') {
      _template = generateComContains(
        element.Filters.filter(item=>item.Value||item.ValueName||item.Condition=='isnotblank'||item.Condition=='isblank'||item.ElementType),
         index == 0,
        true,
        relationName
      );
    }else {
      _template = generateBasicFilter(
        element,
        index == 0,
        fromGroup,
        relationName
      );
    }

    Template.push(_template);
  });
  return Template;
};
